<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>商品：<input type="text" v-model="product.name"></p>
			<p>数量：<input type="number" v-model="product.quantity"></p>
			<p>价格：<input type="number" v-model="product.price"></p>
			<input type="submit" value="添加到购物车" v-on:click="add">
			
			
			<ul>
				<li v-for="item in list" >
                    <strong>{{item.name}}</strong>
                    的数量是<strong>{{item.quantity}}</strong>,
                    单价是<strong>{{item.price}}</strong>,
                    小计：<u>{{item.quantity*item.price}}</u>
				</li>
				 {{totalProduct}}
				 <li>总计：总数----<u>{{totalNum}}</u>----总价----<u>{{totalPrice}}</u></li>
			</ul>		
		</div>
		
	<script>
	    var i = new Vue({
	    el: "#app",
	    data: {
	      product: {
	        name: "",
	        quantity: "",
	        price: ""
	      },
	      list: [
	        {
	          name: "牙刷",
	          quantity: 5,
	          price: 5
	        },
	        {
	          name: "牙膏",
	          quantity: 6,
	          price: 15
	        },
	        {
	          name: "镜子",
	          quantity: 2,
	          price: 25
	        }
	      ],
	      totalNum: 0,
	      totalPrice: 0
	    },
	
	    methods: {
	      add() {
	        if (JSON.stringify(this.product) != '{}') {
	          this.list.push(this.product)
	          this.product = {};
	        }
	      }
	    },
	    computed: {
	      totalProduct() {
	        const length = this.list.length
	        if (length != 0) {
	          for (i = 0; i < length; i++) {
	            this.totalNum += parseInt(this.list[i].quantity)
	            this.totalPrice += parseInt(this.list[i].quantity) * parseInt(this.list[i].price)
	          }
	        }
	      }
	
	    }
	  })
	</script>	
	</body>
</html>
